<template>
  <van-cell-group>
    <van-field
      v-model="signature"
      center
      maxlength="15"
      show-word-limit
      clearable
      @input="listening"
    >
      <van-button
        slot="button"
        size="small"
        type="primary"
        @click="Confirm"
        :disabled="isInput"
      >
        {{ $t("sureModify") }}
      </van-button>
    </van-field>
  </van-cell-group>
</template>

<script>
import { Cell, CellGroup, Field, Button } from 'vant';
import 'vant/lib/field/style/less';
import 'vant/lib/button/style/less';

export default {
    name: 'signature',
    components: {
        [Cell.name]: Cell,
        [CellGroup.name]: CellGroup,
        [Field.name]: Field,
        [Button.name]: Button
    },
    data () {
        return {
            signature: this.$store.state.userInfo.signature,
            isInput: true
        };
    },
    methods: {
        Confirm () {
            const datas = {
                params: {
                    signature: this.signature
                },
                id: this.$store.state.userInfo._id
            };
            this.$util.loadingToast();
            this.$api.userApi
                .updateUserInfo(datas)
                .then(res => {
                    if (res.code === 20000) {
                        this.$util.successToast();
                        this.$store.commit('overRideValue', {
                            state: 'userInfo',
                            value: {
                                signature: this.signature
                            }
                        });
                        this.$router.go(-1);
                    } else {
                        this.$util.failToast();
                    }
                })
                .catch(err => {
                    throw err;
                });
        },
        listening () {
            this.isInput = false;
        }
    }
};
</script>

<style scoped></style>
